<template>
  <div class="business-list">
    <!-- alert -->
    <a-alert> 请上传首页照片或首尾两页合照。请保证图片内容清晰、无反光、无折痕、背景无杂物。 </a-alert>
    <div class="compulsory-item-wrapper" v-for="(item, index) in form.business" :key="item.key">
      <div class="compulsory-item-title">
        <div class="title-text">商业保险单</div>
        <div class="title-operate">
          <a-button status="danger" type="text" @click="delInsuranceFn(index)">
            <template #icon>
              <icon-delete />
            </template>
            删除
          </a-button>
        </div>
      </div>
      <div class="compulsory-item-content">
        <business-item :showTip="false" :info="item" :operateType="operateType" :fieldPrefix="`business.${index}.`" />
      </div>
    </div>
  </div>
</template>

<!-- 交强险 -->
<script setup name="CarManageFormBusiness">
  import { inject } from 'vue'
  import { Modal } from '@arco-design/web-vue'
  import businessItem from './business-item.vue'
  defineProps({
    operateType: {
      type: String,
      default: 'addCar', // addCar | addInsure | editInsure
    },
  })
  const form = inject('form')
  // 删除保险
  const delInsuranceFn = (index) => {
    Modal.confirm({
      title: '提示',
      simple: true,
      cancelText: '取消',
      okText: '确认',
      bodyStyle: {
        'text-align': 'center',
      },
      content: '确认删除保险单信息吗？',
      onOk: () => {
        form.value.business.splice(index, 1)
      },
    })
  }
</script>

<style lang="less" scoped>
  .compulsory-item-wrapper {
    border: 1px solid #e5e6eb;
    margin-top: 20px;
    .compulsory-item-title {
      height: 48px;
      line-height: 48px;
      background: #f2f3f5;
      padding: 0 5px 0 12px;
      display: flex;
      justify-content: space-between;
    }
    .compulsory-item-content {
      padding: 0 20px;
    }
  }
</style>
